<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡切换</title>
		<link rel="stylesheet" type="text/css" href="css/tabdemo.css"/>
	</head>
	<body>
		<div class="tabox">
		      <div class="hd">
		        <ul>
		          <li class="on">疯狂抢购</li>
		          <li class=" ">猜您喜欢</li>
		          <li class=" ">热卖商品</li>
		          <li class=" ">热评商品</li>
		          <li class=" ">新品上架</li></ul>
		      </div>
		      <div class="bd">
		        <ul class="lh">
		          <img src="img/p1.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p2.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p3.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p4.jpg" >
		        </ul>
		        <ul class="lh" style="display: none;">
		          <img src="img/p5.jpg" >
		        </ul>
		      </div>
		    </div>
		<div id="game">
			<span id="player">
				<img src="img/player_right.gif" class="player-gif"/>
			</span>
		</div>
	</body>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>
		//179000550黄超凡
		$("li").click(function () {
			var index = $("li").index(this);
			$(this).addClass("on").siblings().removeClass("on");
			$(".bd > ul.lh").eq(index).show().siblings().hide();
		});

		//  禁止网页点击右键出现菜单	鼠标左右键均可移动
		document.oncontextmenu = function () {
			return false;
		};

		$(window).mousedown(function (e) {
			var x = e.pageX-134 || e.originalEvent.x - 134;
			var y = e.pageY-108 || e.originalEvent.y - 108;
			if (y < 333) {			// 角色不能移动至黑色背景以上
				y = 333;
			};
			if (y > 800) {			// 角色不能移动至黑色背景以上
				y = 800;
			};
			if (x < 8) {			// 角色不能移动至黑色背景以上
				x = 8;
			}
			console.log(x,y)
			console.log($("#player")[0].offsetLeft)
			if (x < ($("#player")[0].offsetLeft)) {
				$(".player-gif").attr("src","img/player_left.gif");
				$("#player").stop(true , false).animate({			//stop 取消队列动画,当前动画不立即完成
					left:x,
					top:y
				},2000 , "linear")
			}else {
				$(".player-gif").attr("src","img/player_right.gif");
				$("#player").stop(true , false).animate({
					left:x,
					top:y
				},2000 , "linear")
			};

			if ($(window).keydown(function (e) {
				if (e.keyCode == 81) {
					console.log($(".player-gif").attr("src"));
					if ($(".player-gif").attr("src") == "img/player_left.gif") {
						$(".player-gif").attr("src", "img/playerbig_left.gif");
					}else {
						$(".player-gif").attr("src", "img/playerbig_right.gif");
					}

				}
			}));
		})
	</script>
</html>
